﻿
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">

    <!--公共样式-->
    <link href="css/Reset.css" rel="stylesheet" />
    <!--主要样式-->

    <link href="css/rl.css?v=1.2" rel="stylesheet" />
    <style>
        /*右边按钮*/
        .right-panel {
            position: fixed;
            bottom: .5rem;
            right: .5rem;
        }

            .right-panel img {
                width: 100%;
                height: 100%;
            }

            .right-panel ul {
                margin: 0;
                padding: 0;
            }

            .right-panel li {
                width: 1rem;
                height: 1rem;
                list-style: none;
                margin-top: .3rem;
                opacity: .9;
            }

        .search-top {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
            width: 100%;
            background: #fff;
            box-shadow: 0px 0px 8px #D2D2D2;
        }

            .search-top .searchbar {
                padding: 0.4rem 0.5rem;
            }

                .search-top .searchbar .searchbar-cancel {
                    color: #666;
                    opacity: 1;
                    margin-right: 0;
                }

            .search-top .search-input input {
                border-color: #E6E6EB;
                border-radius: .1rem;
            }

            .search-top .search-input {
                margin-right: 2.5rem;
                margin-left: 1.5rem;
            }

        .search-close {
        }

        .search-top .searchbar .searchbar-cancel.search-close {
            left: 0;
            right: auto;
            float: left;
            width: 1.5rem;
        }

        div .right-panel li {
            background-color: transparent;
        }

        .wd {
            color: white;
            position: absolute;
            right: 4px;
            width: 16px;
            height: 16px;
            background-color: red;
            opacity: .9;
            text-align: center;
            border-radius: 50%;
            line-height: 16px;
        }
        .sc-item .lunar-day{
            font-size:12px;
            -webkit-transform:scale(0.8);
        }
        .red{color:#ff0000;}
        .xiu{color:#4dea27;}
        .xiuflag{float:right;font-size:12px;padding:2px;}

        .announceItem{border:none;}

        .announceTime {
            border-bottom: 1px solid rgb(239,239,244);
            padding:10px 0;
        }
    </style>
    <title>我的日志</title>
</head>

<body>
    <div class="inner">
        <div id='calendar' class="sc-calendar">
            <div class="sc-header">
                <div class="sc-title">
                    <div class="year"><span class="sc-select-year" name=""></span>年</div>
                    <div class="month">
                        <div class="arrow sc-mleft"></div>
                        <div class="monthdiv">
                            <span class="sc-select-month" name=""></span>
                        </div>
                        <div class="arrow sc-mright"></div>
                    </div>
                </div>
                <div class="sc-week"></div>
            </div>
            <div class="sc-body">
                <div class="sc-days"></div>
            </div>
        </div>
        <div class="announcement">
            <ul class="matter">
                <li class="announceItem">
                    <div>
                        <div class="fl announceImg">
                            <img class=" " src="/View_Mobile/UI/GZRZ/images/content.png">
                        </div>
                        <p class="announceContent">日志内容</p>
                    </div>
                    <div id="rwnr">
                        <div class="announceTime ">
                            暂无
                        </div>
                    </div>

                </li>

            </ul>
        </div>

        <div class="right-panel">
            <ul>

                <li id="gotosh">
                    <div class="wd">0</div>
                    <a class="mod-li-icon"><img src="/View_Mobile/images/plus-zhankai.png"></a>
                </li>
                <!--ms-if-->
                <li id="gotoadd">
                    <a class="mod-li-icon"><img src="/View_Mobile/images/plus-add.png"></a>
                </li>
            </ul>
        </div>
        <!--<img src="/View_Mobile/images/plus-add.png" style="position:absolute;    top: 76%;left: 80%;width: 55px;height: 55px;" id="gotosh">

        <img src="/View_Mobile/images/plus-add.png" style="position:absolute;    top: 86%;left: 80%;width: 55px;height: 55px;" id="gotoadd">-->
    </div>


    <script src="../../JS/Jquery2.1.js"></script>
    <script src="js/rl.js?v=1.2"></script>
    <script src="js/ham.js"></script>
    <script src="/View_Mobile/JS/ComFunJS.js?jsver=20160425"></script>
    <script type="text/javascript">
        var nowdate = getnowdate("yyyy-mm-dd");
        var myCalendar = new SimpleCalendar('#calendar');
        var startDate = "";
        var endDate = "";

        var mark = []; //[{ rwdate: "2018-06-13", title: "任务内容任务内容任务内容任务内容任务内容1" }, { rwdate: "2018-06-15", title: "任务内容任务内容任务内容任务内容任务内容2" }];
        var holidays = [];
        $(function () {

            //if (!ComFunJS.iswx()) {
            //    window.location.href = "../UI_Error.html?msg=请在微信端打开";
            //}


            init();

            $.getJSON("/API/VIEWAPI.ashx?Action=OUTAPI_GETMYAPPROVELOGCOUNT&r=" + Math.random(), { "logStatus": 1 }, function (r) {
                if (r.Result) {
                    $("#gotosh").find(".wd").text(r.Result);
                }
            })

            //sc-month sc-today

            var monthCH = $('.sc-select-month').text();
            $(".sc-mleft").click(function () {
                myCalendar.subMonth();
                var year = $('.sc-select-year').text();
                var monthCH = $('.sc-select-month').text();
                var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH) + 1;
                init();

            })
            $(".sc-mright").click(function () {
                myCalendar.addMonth();
                var year = $('.sc-select-year').text();
                var monthCH = $('.sc-select-month').text();
                var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH) + 1;
                init();

            })

            //滑动切换
            var myElement = document.getElementById('calendar');
            var hammer = new Hammer(myElement);
            hammer.on("swipeleft", function (ev) {
                myCalendar.addMonth();
                init();

            });
            hammer.on("swiperight", function (ev) {
                myCalendar.subMonth();
                init();

            });

            //添加标记

            myCalendar._defaultOptions.mark = mark;
            myCalendar.update();


            //显示当天的活动在初始化mark之后
            //初始化今天的活动
            // announceList($('.sc-today'));
            //有标记的日期点击事件
            $('#calendar').on("click", '.sc-selected', function () {
                // announceList($(this));
            });
            //$(".sc-item").each(function () {
            //    $(this).insertBefore('<p class="mark">•</p>')
            //})



            $("#gotoadd").click(function () {
                var temdate = $(".sc-active-day").eq(0).attr("date");
                temdate = temdate || getnowdate("yyyy-mm-dd");

                location.href = "addrecord.html?rwdate=" + temdate;
            })
            $("#gotosh").click(function () {
                location.href = "DBRW.html";
            })
            $(".sc-body ").on('click', ".sc-item", function () {
                var temdate = $(this).attr("date");
                ShowLog(temdate);
            })
            ShowLog(nowdate);
        });

        function ShowLog(temdate) {
            var html = "";
            var idx = 1;
            for (var i = 0; i < mark.length; i++) {
                if (mark[i].work_date == temdate) {
                    html += ' <div class="announceTime ">'
                    html += "(" + idx.toString() + ")";
                    if (mark[i].billingHoursDesc) {
                        html += "【工作日志】" + mark[i].billingHoursDesc + "（" + mark[i].billingHours + "工时）";
                    }
                    if (mark[i].overworkHoursDesc) {
                        html += "<br/>【加班日志】" + mark[i].overworkHoursDesc + "（" + mark[i].overworkHours + "工时）";
                    }
                    html += ' </div>'
                    idx++;
                }
            }
            if (html == "") {
                html = "暂无";
            }
            $("#rwnr").html(html);
        }


        function init() {

            $(".sc-item").find(".xiuflag").removeClass(".xiu").removeClass("red").text("");
            startDate = $(".sc-item").first().attr("date");
            endDate = $(".sc-item").last().attr("date");

            $.getJSON("/API/VIEWAPI.ashx?Action=OUTAPI_GETHOLIDAYS&r=" + Math.random(), { "startDate": startDate, "endDate": endDate }, function (r) {
                if (r.Result) {
                    holidays = JSON.parse(r.Result);
                } else {
                    holidays = [];
                }
               

                $(".sc-item").each(function (index, element) {
                    var temdate = $(this).attr("date");

                    if (index % 7 == 5 || index % 7 == 6) {
                        $(this).find(".xiuflag").addClass("xiu").text("休");
                    }

                    for (var i = 0; i < holidays.length; i++) {
                        if (temdate == holidays[i].reDate) {
                            if (holidays[i].status == "1") {
                                $(this).find(".xiuflag").addClass("xiu").text("休");
                            } else if (holidays[i].status == "2") {
                                $(this).find(".xiuflag").removeClass("xiu").addClass("red").text("班");
                            }
                        }
                    }

                })

            })
            $.getJSON("/API/VIEWAPI.ashx?Action=OUTAPI_GETMYLOGBYUDS&r=" + Math.random(), { "startDate": startDate, "endDate": endDate }, function (r) {
                if (r.Result) {
                    mark = JSON.parse(r.Result);
                } else {
                    mark = [];
                }

                $(".sc-item").each(function (index, element) {
                    var temdate = $(this).attr("date");
                    if (temdate > nowdate) {
                        $(this).find(".markwb").text("");
                        $(this).find(".mark").text("");
                    } else {
                        $(this).find(".markwb").text("•");
                        $(this).find(".mark").removeClass(".mark").addClass("markwb").text("•");
                    }

                    for (var i = 0; i < mark.length; i++) {
                        if (mark[i].work_date == temdate) {
                            $(this).find("p").removeClass("markwb").addClass("mark");
                        }
                    }

                })

                ShowLog(nowdate);
            })


           // $(".sc-item").find(".xiuflag").removeClass(".xiu").removeClass("red").text("");

            //$(".sc-item").each(function (index, element) {
            //    var temdate = $(this).attr("date");
            //    if (temdate > nowdate) {
            //        $(this).find(".markwb").text("");
            //        $(this).find(".mark").text("");
            //    } else {
            //        $(this).find(".markwb").text("•");
            //        $(this).find(".mark").removeClass(".mark").addClass("markwb").text("•");
            //    }

            //    if (index % 7 == 5 || index % 7 == 6) {
            //        $(this).find(".xiuflag").addClass("xiu").text("休");
            //    }

            //    for (var i = 0; i < holidays.length; i++) {
            //        if (temdate == holidays[i].reDate) {
            //            if (holidays[i].status == "1") {
            //                $(this).find(".xiuflag").addClass("xiu").text("休");
            //            } else if (holidays[i].status == "2") {
            //                $(this).find(".xiuflag").removeClass("xiu").addClass("red").text("班");
            //            }
            //        }
            //    }

            //    for (var i = 0; i < mark.length; i++) {
            //        if (mark[i].work_date == temdate) {
            //            $(this).find("p").removeClass("markwb").addClass("mark");
            //        }
            //    }

            //})

        }
        function getnowdate(format) {
            var now = new Date();

            var year = now.getFullYear();       //年
            var month = now.getMonth() + 1;     //月
            var day = now.getDate();            //日
            var hh = now.getHours();
            var mm = now.getMinutes();
            var ss = now.getSeconds();

            var clock = year + "-";

            if (format == "yyyy-mm") {
                if (month < 10)
                    clock += "0";
                clock += month + "-";
            }

            if (format == "yyyy-mm-dd") {
                if (month < 10)
                    clock += "0";
                clock += month + "-";
                if (day < 10) {
                    clock += "0";
                }
                clock += day + "-";
            }
            if (format == "yyyy-mm-dd hh:mm") {
                if (month < 10)
                    clock += "0";
                clock += month + "-";
                if (day < 10) {
                    clock += "0";
                }
                clock += day + " ";

                if (hh < 10)
                    clock += "0";
                clock += hh + ":";
                if (mm < 10)
                    clock += "0";
                clock += mm + ":";

            }

            if (format == "yyyy-mm-dd-hh-mm") {
                if (month < 10)
                    clock += "0";
                clock += month + "-";
                if (day < 10) {
                    clock += "0";
                }
                clock += day + "-";

                //if (hh < 10)
                //    clock += "0";
                clock += hh + "-";
                if (mm < 10)
                    clock += "0";
                clock += mm + "-";

            }
            if (format == "yyyy-mm-dd hh:mm:ss") {
                if (month < 10)
                    clock += "0";
                clock += month + "-";
                if (day < 10) {
                    clock += "0";
                }
                clock += day + " ";

                if (hh < 10)
                    clock += "0";
                clock += hh + ":";
                if (mm < 10)
                    clock += "0";
                clock += mm + ":";
                if (ss < 10)
                    clock += "0";
                clock += ss + ":";

            }
            return (clock.substr(0, clock.length - 1));
        }

        //显示选择日期当天的活动
        function announceList(v) {
            console.log(v)
            if (v.children().hasClass('sc-mark-show')) {
                var year = $('.sc-select-year').text();
                var monthCH = $('.sc-select-month').text();
                var day = v.children()[1].innerText;
                var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH) + 1;
                var date = year + '-' + month + '-' + day;
                var content = mark[date];
                var matterHtml = '';
                for (var i = 0; i < content.length; i++) {
                    matterHtml += '<li class="announceItem"><div><div class="fl announceImg">'
                        + '<img class=" " src="images/content.png"/></div>'
                        + '<p class="announceContent">' + content[i].title + '</p>'
                        + '</div><div class="announceTime">' + content[i].startTime + ' - ' + content[i].endTime + '</div></li>';
                }
                $('.matter').html(matterHtml);
            } else {
                var matterHtml = ''
                matterHtml += '<li class="announceItem"><div><p class="announceContent">当前日期暂无活动</p></div></li>';
                $('.matter').html(matterHtml);
            }
        }



    </script>
</body>

</html>